import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import router from './router'
import store from './store/index'
import 'amfe-flexible'
import axios from 'axios'
import fastClick from 'fastclick'
import SIdentify from './views/common/Identify'
import setAxios from './setAxios'
import VueLazyload from 'vue-lazyload'
import animated from 'animate.css'

Vue.config.productionTip = false
fastClick.attach(document.body)
Vue.prototype.axios = axios // 全局挂载axios
axios.defaults.timeout = 5000 // axios请求超时的时间
axios.defaults.baseURL = '/api/' // axios请求页面里就可以省略api
Vue.use(SIdentify) // 图形验证码
Vue.use(setAxios) // axios拦截
Vue.use(VueLazyload, { // 图片懒加载
  preLoad: 1.3, // 距离当前dom距离页面底部的高度
  error: '', // 加载失败显示的图片
  loading: '', // 加载中显示的图片
  attempt: 1 // 图片加载失败，最多重试的次数
})
Vue.use(animated)

// 路由守卫 ：当未登录的时候，‘购物车’和‘我的’无法看
router.beforeEach((to, from, next) => { // 无论刷新还是跳转路由，第一个进入的都是这个前置钩子函数
  store.commit('setToken', localStorage.getItem('token')) // 获取本地的token，并存储到vuex中
  if (to.meta.requireAuth) { // to代表进入的路由, router.js中的meta属性
    if (store.state.token) { // 判断vuex中这个是否存在token,存在则跳转
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 参数  当前跳转进的路由，但是没有token被迫跳转到登录页面，当登陆完在跳转到这个页面
      }) //  to.fullPath匹配路由,例如 fullPath： '/login'
    }
  } else {
    next() // 执行下一步必须写，不然不动作
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
